<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建套餐</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" charset="utf-8"
	src="${ctx}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${ctx}/ueditor/ueditor.all.min.js">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	src="${ctx}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${ctx}/ueditor/third-party/9fm/9fm.v1.js"></script>

<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
</head>
<body>
	<style>
.inline {
	display: inline-block
}

.table-div {
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 6px;
}

.table-group td {
	padding: 6px
}
</style>
	<form id="form1" class="form-horizontal"
		action="${ctx}/TblComboInfo/save.htm" method="post"
		enctype="multipart/form-data">
		<div class="form-group">
			<label for="name" class="col-sm-2 control-label item ">套餐标题：</label>
			<div class="col-sm-6  ">
				<input type="text" class="form-control " id="comboTitle"
					name="comboTitle" value="${mealDetail.comboTitle}" /> <input
					type="hidden" class="form-control " id="comboId" name="comboId"
					value="${mealDetail.comboId}" /> <input type="hidden"
					class="form-control " id="comboStatus" name="comboStatus" value="0" />
			</div>
			<span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
		</div>

		<div class="form-group">
			<label for="name" class="col-sm-2 control-label item ">套餐图：</label>
			<div class="col-sm-6  ">
				<input type="file" id="cfile" name="cfile" class="upload"
					accept="image/*" /> <img id="banimg1" class="banimg1" width="100"
					height="100" src="${mealDetail.comboLogo}" />
				<div class="colortxt" style="color: red">支持jpg/jpeg/png格式，建议尺寸148*148</div>
			</div>
			<span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
		</div>

		<div class="form-group">
			<label for="name" class="col-sm-2 control-label item ">简介：</label>
			<div class="col-sm-6  ">
				<textarea class="form-control" rows="3" id="comboAbstract"
					name="comboAbstract">${mealDetail.comboAbstract}</textarea>
			</div>
			<span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
		</div>


		<div class="form-group">
			<label for="name" class="col-sm-2 control-label item ">套餐选项卡：</label>
			<div class="col-sm-9  ">
				<c:forEach items="${extendMealDetail }" var="list"
					varStatus="status">
					<div class="table-div delXuan" id="delxuan1">
						<table class="table-group">
							<thead>${list.tblName }
								<c:if test="${fn:length(extendMealDetail) gt 1  }">
									<c:if test="${status.index == 1  }">
										<a type onclick="hideXuan1()" id="delxuan1">删除</a>
									</c:if>
								</c:if>
							</thead>
							<tbody>
								<tr colspan="2" class="form-group">
									<td width='26%'><span class="help-block"
										style="color:#FF9966">*</span>市场价</td>
									<td width='74%'><input type="text"
										class="form-control marketPrice"
										id="marketPrice${status.index}"
										name="marketPrice${status.index}" value="${list.marketPrice }" /></td>
								</tr>
								<tr colspan="2" class="form-group">
									<td><span class="help-block" style="color:#FF9966">*</span>套餐价
									</td>
									<td><input type="text" class="form-control comboPrice"
										id="comboPrice${status.index}"
										name="comboPrice${status.index}" value="${list.comboPrice }" />
									</td>
								</tr>
								<tr colspan="2" class="form-group">
									<td><input type="hidden" class="form-control" id="tblName"
										name="tblName" value="套餐A" /> <span class="help-block"
										id="valierr" style="color:#FF9966">*</span>${list.tblName}详情</td>
									<td>
										<div id="divContentTidA">
											<input class="form-control  taocanxiangqingA"
												id="tblIntroduce${status.index}"
												name="tblIntroduce${status.index}"
												value='${list.tblIntroduce }'
												style="backgroung:#fff;border:0;opacity:0;width:0;height:0" />
											<!--style给定宽度可以影响编辑器的最终宽度-->
											<script type="text/plain" id="myEditor1${status.index }"
												style="width:480px;height:100px;"></script>

											<script type="text/javascript">
												UE.getEditor( 'myEditor1${status.index }') .addListener( 'blur', function() {
																	//失去焦点，做一次保存操作
													$("#tblIntroduce${status.index}").val(UE.getEditor('myEditor1${status.index }').getContent());
																});
												UE.getEditor('myEditor1${status.index }').ready(
																function() {UE.getEditor('myEditor1${status.index }').setContent('${list.tblIntroduce }');
																});
											</script>
											<div id="errmsg"></div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
						<c:if test="${fn:length(extendMealDetail) eq 1  }">
							<a type onclick="showXuan()" id="addxuan">添加选项卡</a>
						</c:if>
						<a type onclick="showXuan()" id="addxuan" style="display:none"; >
							添加选项卡</a>
					</div>
				</c:forEach>
			</div>
		</div>
		<div class=" form-group " id="showXuan"   style="display:none";>
			<a type onclick="hideXuan()" id="delxuan"> 删除 </a>
			 <label for="name" class="col-sm-2 control-label item ">&nbsp;</label>
			<div class="col-sm-9 ">
				<div class="table-div ">
					<table class="table-group">
						<thead>套餐B</thead>
						<tbody>
							<tr colspan="2" class="form-group">
								<td width='26%'>
								    <span class="help-block" style="color:#FF9966">*</span>市场价
								</td>
								<td width='74%'><input type="text" class="form-control marketPrice" id="marketPriceB"
									name="marketPriceB" /></td>
							</tr>
							<tr colspan="2" class="form-group">
								<td><span class="help-block" style="color:#FF9966">*</span>套餐价
								</td>
								<td><input type="text" class="form-control comboPrice"
									id="comboPriceB" name="comboPriceB" /></td>
							</tr>
							<tr colspan="2" class="form-group">
								<td><input type="hidden" class="form-control " id="tblName"
									name="tblName" value="" /> <span class="help-block"
									id="valierr" style="color:#FF9966">*</span>套餐B详情</td>
								<td>
									<div>
										<input class="form-control taocanxiangqingA"
											id="tblIntroduceB" name="tblIntroduceB"
											style="backgroung:#fff;border:0;opacity:0;width:0;height:0" />
										<!--style给定宽度可以影响编辑器的最终宽度-->
										<script type="text/plain" id="myEditor2"
											style="width:480px;height:100px;"></script>
										<div id="errmsg"></div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="form-group" id="divContent">
			<label for="name" class="col-sm-2 control-label item wid1">套餐说明：</label>
			<div class="col-sm-9 wid2">
				<input class="form-control " name="comboIntroduce" id="comboIntroduce" value='${mealDetail.comboIntroduce }'
				 style="backgroung:#fff;border:0;opacity:0;width:0;height:0" />
				<!--style给定宽度可以影响编辑器的最终宽度-->
				<script type="text/plain" id="myEditor3"
					style="width:480px;height:100px;"></script>
				<div id="errmsg"></div>
			<span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-10 text-center pt15">
				<shiro:hasPermission name="message:save">
					<button type="button"
						class="btn btn-primary btn-lg srt-btn active mr30"
						onclick="valiSubmit()">发送</button>
					<button type="reset" class="btn btn-default btn-lg srt-btn active">重置</button>
				</shiro:hasPermission>
			</div>
		</div>
		<div class="form-group">
			<div class=" col-sm-10">
				<span id="error-text" style="color: #FF0000;"></span>
			</div>
		</div>
	</form>


	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/messages_zh.min.js"></script>
	<script type="text/javascript">
	
	$.validator.addMethod("codeType", function(value, element) {
	    return this.optional(element) || /^(([1-9]\d{0,9})|0)(\.\d{1,2})?$/.test(value);
	}, "请输入正确的金额!");
	$.validator.addMethod("limitType", function(value, element) {
	    var str = value.substr(value.lastIndexOf(".")).toLowerCase();
	    return this.optional(element) || /.(png|jpg)$/.test(str);
	}, "上传文件格式不正确!");

	function showXuan() {
			$("#showXuan").show();
			$("#addxuan").hide();
		}
		function hideXuan() {
			$("#addxuan").show();
			$("#showXuan").hide();
		}
		function hideXuan1() {
			$(".table-div").eq(1).remove();
			$(".delXuan").eq(1).hide();
			$("#addxuan").show();
		}

		
		var form = $('#form1');
		form.validate({
			rules : {
				comboTitle : {
					maxlength : 30,
					required : true
				},
				cfile : {
                    limitType : "limitType"
                },
				comboAbstract : {
					maxlength : 60,
					required : true
				},
				marketPrice0 : {
					min : 0,
					max:99999999.99,
					codeType : "codeType",
					required : true

				},
				marketPrice1 : {
					min : 0,
					max:99999999.99,
					codeType : "number",
					required : true

				},
				marketPriceB : {
					min : 0,
					max:99999999.99,
					codeType : "number",
					required : true

				},
				comboPrice0 : {
					min : 0,
					max:99999999.99,
					number : "number",
					required : true

				},
				comboPrice1 : {
					min : 0,
					max:99999999.99,
					number : "number",
					required : true

				},
				comboPriceB : {
					min : 0,
					max:99999999.99,
					codeType : "codeType",
					required : true
				},
				tblIntroduce0 : {
					required : true
				},
				tblIntroduce1 : {
					required : true
				},
				tblIntroduceB : {
					required : true
				},
				comboIntroduce : {
					required : true
				}
			},
			highlight : function(element) {
				$(element).closest('.form-group').removeClass('success')
						.addClass('error');
			},
			success : function(element) {
				element.text('OK!').addClass('valid').closest('.form-group')
						.removeClass('error').addClass('success');
			}
		});

		function valiSubmit() {
			if (form.valid()) {
				var jsonData = [];
				$(".table-div ").each(function(i, item) {
	            var marketPrice = $(this).find(".marketPrice").val();
	            var comboPrice = $(this).find(".comboPrice").val();
	            var tblIntroduce = $(this).find('.taocanxiangqingA').val();
	            var tblName = $(this).find("#tblName").val();
					var j = {};
					j.marketPrice = marketPrice;
					j.comboPrice = comboPrice;
					j.tblIntroduce = tblIntroduce;
					j.tblName = tblName;
					jsonData.push(j);
				});
				
				var options = {
					dataType : "json",
					data : {
						data : JSON.stringify(jsonData)
					},
					beforeSubmit : function() {
						$(".unable").show();
					},
					success : function(result) {
						if (!$('.unable').is(':hidden')) {
							$(".unable").hide();
						}
						if (result) {
							// 普通消息提示条
							bootstrapQ.msg({
								msg : '发布成功！',
								type : 'success',
								time : 2000
							});
							//触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
							$("button.bsok").click();
						} else {
							bootstrapQ.msg({
								msg : '发布失败！',
								type : 'danger',
								time : 2000
							});
						}
					},
					error : function(result) {
						if (!$('.unable').is(':hidden')) {
							$(".unable").hide();
						}
						bootstrapQ.msg({
							msg : '发布失败！',
							type : 'danger',
							time : 2000
						});
					}
				};
				form.ajaxSubmit(options);
				return false;
			}
		}

		/** ue编辑器 start 套餐详情B*/
		
		var ue2 = UE.getEditor('myEditor2');
		ue2.addListener('blur', function() {
			//失去焦点，做一次保存操作
			$('input[name="tblIntroduceB"]').val(ue2.getContent());
		});
		
		//套餐说明
		var ue3 = UE.getEditor('myEditor3');
		ue3.addListener('blur', function() {
			//失去焦点，做一次保存操作
			  $('input[name="comboIntroduce"]').val(ue3.getContent())
		});
		ue3.ready(function() {
			ue3.setContent('${ mealDetail.comboIntroduce }');
         });
		
	</script>
</body>
</html>